import { defaultComponentData as componentData } from "ele-admin-plus/es/ele-pro-form-builder/util";
import {
  codeTips,
  vIfCodeTips,
} from "ele-admin-plus/es/ele-pro-form-builder/components/component-data";
import CoverDictCheckbox from "./covers/cover-dict-checkbox.vue";
import CoverDictMultipleSelect from "./covers/cover-dict-multiple-select.vue";
import CoverDictRadio from "./covers/cover-dict-radio.vue";
import CoverDictSelect from "./covers/cover-dict-select.vue";
import CoverEditor from "./covers/cover-editor.vue";
import CoverFileUpload from "./covers/cover-file-upload.vue";
import CoverIconSelect from "./covers/cover-icon-select.vue";
import CoverImageUpload from "./covers/cover-image-upload.vue";
import CoverMultipleRegions from "./covers/cover-multiple-regions.vue";
import CoverRegions from "./covers/cover-regions.vue";

/**
 * 自定义的组件
 */
const additionalItems = [
  {
    type: "iconSelect",
    name: "图标选择",
    cover: CoverIconSelect,
    presetProps: { popperWidth: 414, popperHeight: 260 },
    defaultProps: {},
    initialProps: {
      popperWidth: 480,
      popperHeight: 388,
      filterable: "popper",
      gridStyle: { gridTemplateColumns: "repeat(6, 1fr)" },
    },
    reservedProps: {},
    configForm: [
      {
        label: "基础配置",
        prop: "groupBasicLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "字段名称",
        prop: "label",
        type: "input",
      },
      {
        label: "字段属性",
        prop: "prop",
        type: "input",
      },
      {
        label: "是否必填",
        prop: "required",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "必填校验信息",
        prop: "requiredMessage",
        type: "input",
      },
      {
        label: "初始值",
        prop: "initValue",
        type: "input",
      },
      {
        label: "标签宽度",
        prop: "itemProps.labelWidth",
        type: "inputNumber",
        props: { min: 0 },
      },
      {
        label: "标签位置",
        prop: "itemProps.labelPosition",
        type: "checkCard",
        options: [
          { value: "left", label: "左对齐" },
          { value: "right", label: "右对齐" },
          { value: "top", label: "顶部" },
        ],
        props: { class: "ele-pro-form-builder-props-options-check-card" },
      },
      {
        label: "组件属性",
        prop: "groupPropsLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "占位文本",
        prop: "props.placeholder",
        type: "input",
      },
      {
        label: "清除按钮",
        prop: "props.clearable",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "是否禁用",
        prop: "props.disabled",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "样式设置",
        prop: "groupStylesLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "组件样式",
        prop: "props.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "组件类名",
        prop: "props.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "表单项样式",
        prop: "itemProps.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "表单项类名",
        prop: "itemProps.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "事件设置",
        prop: "groupEventsLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "选中值改变",
        prop: "props.onChange",
        type: "proFormBuilderEventEdit",
        props: {
          title: "设置 change 事件",
          codeTips,
          codePlaceholder: "(value) => {\n\n}",
        },
      },
      {
        label: "下拉框出现/隐藏",
        prop: "props.onVisibleChange",
        type: "proFormBuilderEventEdit",
        props: {
          title: "设置 visibleChange 事件",
          codeTips,
          codePlaceholder: "(visible) => {\n\n}",
        },
      },
      {
        label: "清空按钮点击",
        prop: "props.onClear",
        type: "proFormBuilderEventEdit",
        props: {
          title: "设置 clear 事件",
          codeTips,
          codePlaceholder: "() => {\n\n}",
        },
      },
      {
        label: "失去焦点",
        prop: "props.onBlur",
        type: "proFormBuilderEventEdit",
        props: {
          title: "设置 blur 事件",
          codeTips,
          codePlaceholder: "(enent) => {\n\n}",
        },
      },
      {
        label: "获得焦点",
        prop: "props.onFocus",
        type: "proFormBuilderEventEdit",
        props: {
          title: "设置 focus 事件",
          codeTips,
          codePlaceholder: "(enent) => {\n\n}",
        },
      },
      {
        label: "高级设置",
        prop: "groupAdvancedLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "显示条件",
        prop: "vIf",
        type: "proFormBuilderIfEdit",
        props: {
          title: "设置显示条件",
          codeTips: vIfCodeTips,
        },
      },
      {
        label: "开发者选项",
        prop: "__sourceCode",
        type: "proFormBuilderSourceEdit",
        props: { title: "编辑源码" },
      },
    ],
    componentName: "EleIconSelect",
  },
  {
    type: "regions",
    name: "省市区选择",
    cover: CoverRegions,
    presetProps: {
      type: "default",
      valueField: "value",
      clearable: true,
      filterable: true,
      separator: "/",
      showAllLevels: true,
      cascaderProps: { expandTrigger: "click" },
    },
    defaultProps: {},
    initialProps: { placeholder: "" },
    reservedProps: {},
    configForm: [
      {
        label: "基础配置",
        prop: "groupBasicLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "字段名称",
        prop: "label",
        type: "input",
      },
      {
        label: "字段属性",
        prop: "prop",
        type: "input",
      },
      {
        label: "是否必填",
        prop: "required",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "必填校验信息",
        prop: "requiredMessage",
        type: "input",
      },
      {
        label: "初始值",
        prop: "initValue",
        type: "editTag",
      },
      {
        label: "标签宽度",
        prop: "itemProps.labelWidth",
        type: "inputNumber",
        props: { min: 0 },
      },
      {
        label: "标签位置",
        prop: "itemProps.labelPosition",
        type: "checkCard",
        options: [
          { value: "left", label: "左对齐" },
          { value: "right", label: "右对齐" },
          { value: "top", label: "顶部" },
        ],
        props: { class: "ele-pro-form-builder-props-options-check-card" },
      },
      {
        label: "组件属性",
        prop: "groupPropsLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "占位文本",
        prop: "props.placeholder",
        type: "input",
      },
      {
        label: "清除按钮",
        prop: "props.clearable",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "是否禁用",
        prop: "props.disabled",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "是否可搜索",
        prop: "props.filterable",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "类型",
        prop: "props.type",
        type: "checkCard",
        options: [
          { value: "default", label: "省市区选择" },
          { value: "provinceCity", label: "省市选择" },
          { value: "province", label: "省选择" },
        ],
        props: {
          class: "ele-pro-form-builder-props-options-check-card is-loose",
        },
      },
      {
        label: "值类型",
        prop: "props.valueField",
        type: "checkCard",
        options: [
          { value: "value", label: "区号" },
          { value: "label", label: "名称" },
        ],
        props: { class: "ele-pro-form-builder-props-options-check-card" },
      },
      {
        label: "显示选中值完整路径",
        prop: "props.showAllLevels",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "选项分隔符",
        prop: "props.separator",
        type: "input",
      },
      {
        label: "父子节点不关联",
        prop: "props.cascaderProps.checkStrictly",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "次级菜单展开方式",
        prop: "props.cascaderProps.expandTrigger",
        type: "checkCard",
        options: [
          { label: "点击", value: "click" },
          { label: "鼠标移入", value: "hover" },
        ],
        props: {
          class: "ele-pro-form-builder-props-options-check-card is-loose",
        },
      },
      {
        label: "样式设置",
        prop: "groupStylesLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "组件样式",
        prop: "props.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "组件类名",
        prop: "props.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "表单项样式",
        prop: "itemProps.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "表单项类名",
        prop: "itemProps.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "高级设置",
        prop: "groupAdvancedLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "显示条件",
        prop: "vIf",
        type: "proFormBuilderIfEdit",
        props: {
          title: "设置显示条件",
          codeTips: vIfCodeTips,
        },
      },
      {
        label: "开发者选项",
        prop: "__sourceCode",
        type: "proFormBuilderSourceEdit",
        props: { title: "编辑源码" },
      },
    ],
    componentName: "RegionsSelect",
  },
  {
    type: "multipleRegions",
    name: "省市区多选",
    cover: CoverMultipleRegions,
    presetProps: {
      type: "default",
      valueField: "value",
      clearable: true,
      filterable: true,
      separator: "/",
      showAllLevels: true,
      collapseTags: true,
      maxCollapseTags: 5,
      cascaderProps: { expandTrigger: "click" },
    },
    defaultProps: {},
    initialProps: { placeholder: "" },
    reservedProps: { multiple: true },
    configForm: [
      {
        label: "基础配置",
        prop: "groupBasicLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "字段名称",
        prop: "label",
        type: "input",
      },
      {
        label: "字段属性",
        prop: "prop",
        type: "input",
      },
      {
        label: "是否必填",
        prop: "required",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "必填校验信息",
        prop: "requiredMessage",
        type: "input",
      },
      {
        label: "初始值",
        prop: "initValue",
        type: "proFormBuilderJsonInput",
        props: { placeholder: "输入 JSON 格式" },
      },
      {
        label: "标签宽度",
        prop: "itemProps.labelWidth",
        type: "inputNumber",
        props: { min: 0 },
      },
      {
        label: "标签位置",
        prop: "itemProps.labelPosition",
        type: "checkCard",
        options: [
          { value: "left", label: "左对齐" },
          { value: "right", label: "右对齐" },
          { value: "top", label: "顶部" },
        ],
        props: { class: "ele-pro-form-builder-props-options-check-card" },
      },
      {
        label: "组件属性",
        prop: "groupPropsLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "占位文本",
        prop: "props.placeholder",
        type: "input",
      },
      {
        label: "清除按钮",
        prop: "props.clearable",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "是否禁用",
        prop: "props.disabled",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "是否可搜索",
        prop: "props.filterable",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "类型",
        prop: "props.type",
        type: "checkCard",
        options: [
          { value: "default", label: "省市区选择" },
          { value: "provinceCity", label: "省市选择" },
          { value: "province", label: "省选择" },
        ],
        props: {
          class: "ele-pro-form-builder-props-options-check-card is-loose",
        },
      },
      {
        label: "值类型",
        prop: "props.valueField",
        type: "checkCard",
        options: [
          { value: "value", label: "区号" },
          { value: "label", label: "名称" },
        ],
        props: { class: "ele-pro-form-builder-props-options-check-card" },
      },
      {
        label: "显示选中值完整路径",
        prop: "props.showAllLevels",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "选项分隔符",
        prop: "props.separator",
        type: "input",
      },
      {
        label: "父子节点不关联",
        prop: "props.cascaderProps.checkStrictly",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "次级菜单展开方式",
        prop: "props.cascaderProps.expandTrigger",
        type: "checkCard",
        options: [
          { label: "点击", value: "click" },
          { label: "鼠标移入", value: "hover" },
        ],
        props: {
          class: "ele-pro-form-builder-props-options-check-card is-loose",
        },
      },
      {
        label: "折叠显示 Tag",
        prop: "props.collapseTags",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "最大显示 Tag 数量",
        prop: "props.maxCollapseTags",
        type: "inputNumber",
        props: { min: 1, step: 1, stepStrictly: true },
      },
      {
        label: "悬浮显示折叠的 Tag",
        prop: "props.collapseTagsTooltip ",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "样式设置",
        prop: "groupStylesLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "组件样式",
        prop: "props.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "组件类名",
        prop: "props.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "表单项样式",
        prop: "itemProps.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "表单项类名",
        prop: "itemProps.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "高级设置",
        prop: "groupAdvancedLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "显示条件",
        prop: "vIf",
        type: "proFormBuilderIfEdit",
        props: {
          title: "设置显示条件",
          codeTips: vIfCodeTips,
        },
      },
      {
        label: "开发者选项",
        prop: "__sourceCode",
        type: "proFormBuilderSourceEdit",
        props: { title: "编辑源码" },
      },
    ],
    componentName: "RegionsSelect",
  },
  {
    type: "imageUpload",
    name: "图片上传",
    cover: CoverImageUpload,
    presetProps: { sortable: true, drag: true, fileLimit: 100 },
    defaultProps: {},
    initialProps: { limit: 3 },
    reservedProps: {},
    configForm: [
      {
        label: "基础配置",
        prop: "groupBasicLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "字段名称",
        prop: "label",
        type: "input",
      },
      {
        label: "字段属性",
        prop: "prop",
        type: "input",
      },
      {
        label: "是否必填",
        prop: "required",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "必填校验信息",
        prop: "requiredMessage",
        type: "input",
      },
      {
        label: "初始值",
        prop: "initValue",
        type: "textarea",
      },
      {
        label: "标签宽度",
        prop: "itemProps.labelWidth",
        type: "inputNumber",
        props: { min: 0 },
      },
      {
        label: "标签位置",
        prop: "itemProps.labelPosition",
        type: "checkCard",
        options: [
          { value: "left", label: "左对齐" },
          { value: "right", label: "右对齐" },
          { value: "top", label: "顶部" },
        ],
        props: { class: "ele-pro-form-builder-props-options-check-card" },
      },
      {
        label: "组件属性",
        prop: "groupPropsLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "是否只读",
        prop: "props.readonly",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "是否禁用",
        prop: "props.disabled",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "最大上传数量",
        prop: "props.limit",
        type: "inputNumber",
        props: { min: 1, step: 1, stepStrictly: true },
      },
      {
        label: "文件大小限制",
        prop: "props.fileLimit",
        type: "inputNumber",
        props: { min: 0 },
      },
      {
        label: "可多选文件",
        prop: "props.multiple",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "可拖拽上传",
        prop: "props.drag",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "可拖拽排序",
        prop: "props.sortable",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "图片适应模式",
        prop: "props.imageProps.fit",
        type: "checkCard",
        options: [
          { value: "fill", label: "fill" },
          { value: "contain", label: "contain" },
          { value: "cover", label: "cover" },
          { value: "none", label: "none" },
          { value: "scale-down", label: "scale-down" },
        ],
        props: {
          class: "ele-pro-form-builder-props-options-check-card is-loose",
        },
      },
      {
        label: "图片项样式",
        prop: "props.itemStyle",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "上传按钮样式",
        prop: "props.buttonStyle",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "样式设置",
        prop: "groupStylesLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "组件样式",
        prop: "props.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "组件类名",
        prop: "props.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "表单项样式",
        prop: "itemProps.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "表单项类名",
        prop: "itemProps.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "高级设置",
        prop: "groupAdvancedLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "显示条件",
        prop: "vIf",
        type: "proFormBuilderIfEdit",
        props: {
          title: "设置显示条件",
          codeTips: vIfCodeTips,
        },
      },
      {
        label: "开发者选项",
        prop: "__sourceCode",
        type: "proFormBuilderSourceEdit",
        props: { title: "编辑源码" },
      },
    ],
    componentName: "ImageUpload",
  },
  {
    type: "fileUpload",
    name: "附件上传",
    cover: CoverFileUpload,
    presetProps: { sortable: true, drag: true, fileLimit: 100 },
    defaultProps: {},
    initialProps: { limit: 6 },
    reservedProps: {},
    configForm: [
      {
        label: "基础配置",
        prop: "groupBasicLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "字段名称",
        prop: "label",
        type: "input",
      },
      {
        label: "字段属性",
        prop: "prop",
        type: "input",
      },
      {
        label: "是否必填",
        prop: "required",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "必填校验信息",
        prop: "requiredMessage",
        type: "input",
      },
      {
        label: "初始值",
        prop: "initValue",
        type: "textarea",
      },
      {
        label: "标签宽度",
        prop: "itemProps.labelWidth",
        type: "inputNumber",
        props: { min: 0 },
      },
      {
        label: "标签位置",
        prop: "itemProps.labelPosition",
        type: "checkCard",
        options: [
          { value: "left", label: "左对齐" },
          { value: "right", label: "右对齐" },
          { value: "top", label: "顶部" },
        ],
        props: { class: "ele-pro-form-builder-props-options-check-card" },
      },
      {
        label: "组件属性",
        prop: "groupPropsLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "是否只读",
        prop: "props.readonly",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "是否禁用",
        prop: "props.disabled",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "最大上传数量",
        prop: "props.limit",
        type: "inputNumber",
        props: { min: 1, step: 1, stepStrictly: true },
      },
      {
        label: "文件大小限制",
        prop: "props.fileLimit",
        type: "inputNumber",
        props: { min: 0 },
      },
      {
        label: "可多选文件",
        prop: "props.multiple",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "可拖拽上传",
        prop: "props.drag",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "可拖拽排序",
        prop: "props.sortable",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "文件项样式",
        prop: "props.itemStyle",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "上传按钮样式",
        prop: "props.buttonStyle",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "样式设置",
        prop: "groupStylesLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "组件样式",
        prop: "props.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "组件类名",
        prop: "props.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "表单项样式",
        prop: "itemProps.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "表单项类名",
        prop: "itemProps.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "高级设置",
        prop: "groupAdvancedLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "显示条件",
        prop: "vIf",
        type: "proFormBuilderIfEdit",
        props: {
          title: "设置显示条件",
          codeTips: vIfCodeTips,
        },
      },
      {
        label: "开发者选项",
        prop: "__sourceCode",
        type: "proFormBuilderSourceEdit",
        props: { title: "编辑源码" },
      },
    ],
    componentName: "FileUpload",
  },
  {
    type: "dictRadio",
    name: "字典单选",
    cover: CoverDictRadio,
    presetProps: {},
    defaultProps: {},
    initialProps: { code: "sex" },
    reservedProps: { type: "radio" },
    configForm: [
      {
        label: "基础配置",
        prop: "groupBasicLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "字段名称",
        prop: "label",
        type: "input",
      },
      {
        label: "字段属性",
        prop: "prop",
        type: "input",
      },
      {
        label: "是否必填",
        prop: "required",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "必填校验信息",
        prop: "requiredMessage",
        type: "input",
      },
      {
        label: "初始值",
        prop: "initValue",
        type: "input",
      },
      {
        label: "标签宽度",
        prop: "itemProps.labelWidth",
        type: "inputNumber",
        props: { min: 0 },
      },
      {
        label: "标签位置",
        prop: "itemProps.labelPosition",
        type: "checkCard",
        options: [
          { value: "left", label: "左对齐" },
          { value: "right", label: "右对齐" },
          { value: "top", label: "顶部" },
        ],
        props: { class: "ele-pro-form-builder-props-options-check-card" },
      },
      {
        label: "组件属性",
        prop: "groupPropsLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "是否禁用",
        prop: "props.disabled",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "字典类型值",
        prop: "props.code",
        type: "input",
      },
      {
        label: "样式设置",
        prop: "groupStylesLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "组件样式",
        prop: "props.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "组件类名",
        prop: "props.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "表单项样式",
        prop: "itemProps.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "表单项类名",
        prop: "itemProps.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "高级设置",
        prop: "groupAdvancedLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "显示条件",
        prop: "vIf",
        type: "proFormBuilderIfEdit",
        props: {
          title: "设置显示条件",
          codeTips: vIfCodeTips,
        },
      },
      {
        label: "开发者选项",
        prop: "__sourceCode",
        type: "proFormBuilderSourceEdit",
        props: { title: "编辑源码" },
      },
    ],
    componentName: "DictData",
  },
  {
    type: "dictCheckbox",
    name: "字典多选",
    cover: CoverDictCheckbox,
    presetProps: {},
    defaultProps: {},
    initialProps: { code: "sex" },
    reservedProps: { type: "checkbox" },
    configForm: [
      {
        label: "基础配置",
        prop: "groupBasicLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "字段名称",
        prop: "label",
        type: "input",
      },
      {
        label: "字段属性",
        prop: "prop",
        type: "input",
      },
      {
        label: "是否必填",
        prop: "required",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "必填校验信息",
        prop: "requiredMessage",
        type: "input",
      },
      {
        label: "初始值",
        prop: "initValue",
        type: "editTag",
      },
      {
        label: "标签宽度",
        prop: "itemProps.labelWidth",
        type: "inputNumber",
        props: { min: 0 },
      },
      {
        label: "标签位置",
        prop: "itemProps.labelPosition",
        type: "checkCard",
        options: [
          { value: "left", label: "左对齐" },
          { value: "right", label: "右对齐" },
          { value: "top", label: "顶部" },
        ],
        props: { class: "ele-pro-form-builder-props-options-check-card" },
      },
      {
        label: "组件属性",
        prop: "groupPropsLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "是否禁用",
        prop: "props.disabled",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "字典类型值",
        prop: "props.code",
        type: "input",
      },
      {
        label: "样式设置",
        prop: "groupStylesLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "组件样式",
        prop: "props.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "组件类名",
        prop: "props.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "表单项样式",
        prop: "itemProps.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "表单项类名",
        prop: "itemProps.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "高级设置",
        prop: "groupAdvancedLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "显示条件",
        prop: "vIf",
        type: "proFormBuilderIfEdit",
        props: {
          title: "设置显示条件",
          codeTips: vIfCodeTips,
        },
      },
      {
        label: "开发者选项",
        prop: "__sourceCode",
        type: "proFormBuilderSourceEdit",
        props: { title: "编辑源码" },
      },
    ],
    componentName: "DictData",
  },
  {
    type: "dictSelect",
    name: "字典下拉",
    cover: CoverDictSelect,
    presetProps: { clearable: true },
    defaultProps: {},
    initialProps: { code: "sex" },
    reservedProps: { type: "select" },
    configForm: [
      {
        label: "基础配置",
        prop: "groupBasicLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "字段名称",
        prop: "label",
        type: "input",
      },
      {
        label: "字段属性",
        prop: "prop",
        type: "input",
      },
      {
        label: "是否必填",
        prop: "required",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "必填校验信息",
        prop: "requiredMessage",
        type: "input",
      },
      {
        label: "初始值",
        prop: "initValue",
        type: "input",
      },
      {
        label: "标签宽度",
        prop: "itemProps.labelWidth",
        type: "inputNumber",
        props: { min: 0 },
      },
      {
        label: "标签位置",
        prop: "itemProps.labelPosition",
        type: "checkCard",
        options: [
          { value: "left", label: "左对齐" },
          { value: "right", label: "右对齐" },
          { value: "top", label: "顶部" },
        ],
        props: { class: "ele-pro-form-builder-props-options-check-card" },
      },
      {
        label: "组件属性",
        prop: "groupPropsLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "占位文本",
        prop: "props.placeholder",
        type: "input",
      },
      {
        label: "清除按钮",
        prop: "props.clearable",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "是否禁用",
        prop: "props.disabled",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "是否可搜索",
        prop: "props.filterable",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "字典类型值",
        prop: "props.code",
        type: "input",
      },
      {
        label: "样式设置",
        prop: "groupStylesLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "组件样式",
        prop: "props.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "组件类名",
        prop: "props.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "表单项样式",
        prop: "itemProps.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "表单项类名",
        prop: "itemProps.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "高级设置",
        prop: "groupAdvancedLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "显示条件",
        prop: "vIf",
        type: "proFormBuilderIfEdit",
        props: {
          title: "设置显示条件",
          codeTips: vIfCodeTips,
        },
      },
      {
        label: "开发者选项",
        prop: "__sourceCode",
        type: "proFormBuilderSourceEdit",
        props: { title: "编辑源码" },
      },
    ],
    componentName: "DictData",
  },
  {
    type: "dictMultipleSelect",
    name: "字典下拉多选",
    cover: CoverDictMultipleSelect,
    presetProps: { clearable: true },
    defaultProps: {},
    initialProps: { code: "sex" },
    reservedProps: { type: "multipleSelect" },
    configForm: [
      {
        label: "基础配置",
        prop: "groupBasicLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "字段名称",
        prop: "label",
        type: "input",
      },
      {
        label: "字段属性",
        prop: "prop",
        type: "input",
      },
      {
        label: "是否必填",
        prop: "required",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "必填校验信息",
        prop: "requiredMessage",
        type: "input",
      },
      {
        label: "初始值",
        prop: "initValue",
        type: "editTag",
      },
      {
        label: "标签宽度",
        prop: "itemProps.labelWidth",
        type: "inputNumber",
        props: { min: 0 },
      },
      {
        label: "标签位置",
        prop: "itemProps.labelPosition",
        type: "checkCard",
        options: [
          { value: "left", label: "左对齐" },
          { value: "right", label: "右对齐" },
          { value: "top", label: "顶部" },
        ],
        props: { class: "ele-pro-form-builder-props-options-check-card" },
      },
      {
        label: "组件属性",
        prop: "groupPropsLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "占位文本",
        prop: "props.placeholder",
        type: "input",
      },
      {
        label: "清除按钮",
        prop: "props.clearable",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "是否禁用",
        prop: "props.disabled",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "是否可搜索",
        prop: "props.filterable",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "字典类型值",
        prop: "props.code",
        type: "input",
      },
      {
        label: "样式设置",
        prop: "groupStylesLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "组件样式",
        prop: "props.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "组件类名",
        prop: "props.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "表单项样式",
        prop: "itemProps.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "表单项类名",
        prop: "itemProps.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "高级设置",
        prop: "groupAdvancedLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "显示条件",
        prop: "vIf",
        type: "proFormBuilderIfEdit",
        props: {
          title: "设置显示条件",
          codeTips: vIfCodeTips,
        },
      },
      {
        label: "开发者选项",
        prop: "__sourceCode",
        type: "proFormBuilderSourceEdit",
        props: { title: "编辑源码" },
      },
    ],
    componentName: "DictData",
  },
  {
    type: "editor",
    name: "富文本",
    cover: CoverEditor,
    presetProps: {},
    defaultProps: {},
    initialProps: { init: { height: 380 } },
    reservedProps: {},
    configForm: [
      {
        label: "基础配置",
        prop: "groupBasicLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "字段名称",
        prop: "label",
        type: "input",
      },
      {
        label: "字段属性",
        prop: "prop",
        type: "input",
      },
      {
        label: "是否必填",
        prop: "required",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "必填校验信息",
        prop: "requiredMessage",
        type: "input",
      },
      {
        label: "初始值",
        prop: "initValue",
        type: "textarea",
      },
      {
        label: "标签宽度",
        prop: "itemProps.labelWidth",
        type: "inputNumber",
        props: { min: 0 },
      },
      {
        label: "标签位置",
        prop: "itemProps.labelPosition",
        type: "checkCard",
        options: [
          { value: "left", label: "左对齐" },
          { value: "right", label: "右对齐" },
          { value: "top", label: "顶部" },
        ],
        props: { class: "ele-pro-form-builder-props-options-check-card" },
      },
      {
        label: "组件属性",
        prop: "groupPropsLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "是否禁用",
        prop: "props.disabled",
        type: "switch",
        props: { activeValue: true, inactiveValue: false },
      },
      {
        label: "样式设置",
        prop: "groupStylesLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "组件样式",
        prop: "props.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "组件类名",
        prop: "props.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "表单项样式",
        prop: "itemProps.style",
        type: "proFormBuilderStyleEdit",
      },
      {
        label: "表单项类名",
        prop: "itemProps.class",
        type: "proFormBuilderStyleEdit",
        props: { isClass: true },
      },
      {
        label: "高级设置",
        prop: "groupAdvancedLabel",
        type: "label",
        props: { class: "ele-pro-form-builder-props-group-label" },
      },
      {
        label: "显示条件",
        prop: "vIf",
        type: "proFormBuilderIfEdit",
        props: {
          title: "设置显示条件",
          codeTips: vIfCodeTips,
        },
      },
      {
        label: "开发者选项",
        prop: "__sourceCode",
        type: "proFormBuilderSourceEdit",
        props: { title: "编辑源码" },
      },
    ],
    componentName: "TinymceEditor",
  },
];

/**
 * 表单组件库数据
 */
export const defaultComponentData = componentData.map(
  (groupItem, groupIndex) => {
    const items =
      groupIndex !== 0
        ? groupItem.items
        : [
            ...groupItem.items.slice(0, groupItem.items.length - 1),
            ...additionalItems, // 插入自定义的组件数据
            groupItem.items[groupItem.items.length - 1],
          ];
    return { ...groupItem, items };
  },
);
